<template>
	<el-dropdown class="ml-1" :hide-on-click="false">
		<el-button >
			<svg-icon name='svg-filter' width='20px' height='20px' />
		</el-button>
		<template #dropdown>
			<el-dropdown-menu>
				<el-checkbox-group v-model="checkList" @change="changeFn">
					<el-dropdown-item v-for="(item,index) in copy.list" :key="item.checked+item.label+index">
						<el-checkbox :label="item.prop" :checked="item.checked">
							{{item.label}}
						</el-checkbox>
					</el-dropdown-item>
				</el-checkbox-group>
			</el-dropdown-menu>
		</template>
	</el-dropdown>
</template>

<script setup lang="ts">
	let emits = defineEmits(['update:column'])
	let props = defineProps({
		column: {
			type: Object,
			default: () => {
				return []
			}
		},
		id: {
			type: String,
			default: () => {
				return ''
			}
		}
	})
	let copy = reactive({
		list: [...props.column]
	})
	const checkList = ref([])
	const changeFn = (val) => {
		let arr = copy.list.filter(item => val.includes(item.prop))
		if (props.id) {
			localStorage.setItem(props.id, JSON.stringify(arr))
		}
		emits('update:column', arr)
	}
	onMounted(() => {
		if (props.id) {
		}else{
			console.error('您LzTableColumn组件没有设置id属性，如果需要使用缓存功能，请设置唯一id')
		}
		
		computeDate()
	})

	const computeDate = () => {
		try {
			let arr = JSON.parse(localStorage.getItem(props.id))
			if (arr) {
				let keyArr = arr.map(item => item.prop)
				copy.list = copy.list.map(item => {
					if (keyArr.includes(item.prop)) {
						item.checked = true
					} else {
						item.checked = false
					}
					return item
				})
				let retArr = copy.list.filter(item => item.checked)
				emits('update:column', retArr)
			} else {
				copy.list = copy.list.map(item => {
					item.checked = true
					return item
				})
			}
			// console.log(copy.list);
		} catch (e) {
			console.error('您LzTableColumn组件没有设置id属性')
		}

	}
</script>

<style>
</style>